<template>
  <div class="container">
    <div class="todos">
      <h3>Todo示例</h3>
      <create-form @sendContent="handleContent"></create-form>
      <div v-for="(item, index) in todoList" :key="index">
        <todo-item
          :todo="item"
          @deleteItem="deleteItem"
          v-if="!item.isEdited"
          @editItem="editItem"
        ></todo-item>
        <edit-todo v-else :todo="item" @editTodo="handleEdit"></edit-todo>
      </div>
    </div>
  </div>
</template>

<script setup>
/**
 * 父组件如何接收子组件传递过来的数据？通过事件
 */
import CreateForm from './CreateForm.vue'
import todoItem from './Todo.vue'
import EditTodo from './EditorTodo.vue'
import { ref } from 'vue'

let todoList = ref([])

const handleContent = (content) => {
  // console.log(content)
  todoList.push({
    id: todoList.value.length + 1,
    content: content,
    finished: false,
    isEdited: false,
  })
}
const deleteItem = (content) => {
  const index = todoList.value.findIndex((item) => {
    return item.id == content
  })
  todoList.value.splice(index, 1)
}
const editItem = (content) => {
  const index = todoList.value.findIndex((item) => {
    return item.id == content
  })
  todoList.value[index].isEdited = true
}
const handleEdit = (id, content) => {
  const index = todoList.value.findIndex((item) => {
    return item.id == id
  })
  todoList.value[index].content = content
  todoList.value[index].isEdited = false
}
</script>

<style lang="scss" scoped>
.container {
  background-color: #3b36cc;
  border-radius: 5px;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
}

.todos {
  width: 450px;
  background-color: #1a1a40;
  border-radius: 5px;
  padding: 20px;
  color: white;
  margin-top: 20px;
  text-align: center;
}
</style>
